<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <title>启文管理系统</title>
</head>

<body>
    <!--上方标题栏-->
    <div class="parentTop">
         <a href="#" class="appName">启文管理系统</a>
            <div class="loginNameDiv">
                <img class="loginIcon" src="image/icon.png">
                <div class="loginUserInfo">
                    <span>ice</span><br>
                    <span>技术部</span>
                </div>
            </div>
    </div>

    <!--左侧菜单-->
    <div class="leftMenu">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
        </ul>
    </div>
    <!--主要内容区-->
    <div class="parentMain">
        <iframe id="iframeParent"></iframe>
    </div>

    <!--设置弹框-->
    <div class="dialogMenu">
        <div id="parentChangePassword" class="dialogMenu-item">修改密码</div>
        <div id="parentExit" class="dialogMenu-item">退出</div>
    </div>
</body>

</html>
<!--修改密码弹框-->
<script type="text/html" id="dialogChangePassword">
    <form class="layui-form" id="dialogChangePasswordForm" style="margin-top:30px;padding-right:30px;">
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入原密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword" placeholder="请输入新密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="okPassword" placeholder="请重复输入密码" class="layui-input">
            </div>
        </div>
    </form>
</script>

<script src="js/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    layuiModules = ['layer', 'form', 'element'];

    function mounted() {
        //菜单列表数据
        window.menuArray = [{
            name: "首页",
            id: 0,
            pid: -1,
            url: '#/'
        }, {
            name: "广告位管理",
            id: 1,
            pid: -1,
            url: '#/advert.html'
        }, {
            name: "线索管理",
            id: 2,
            pid: -1,
            url: '#/trackmanager.html'
        }, {
            name: "校区管理",
            id: 3,
            pid: -1,
            url: '#/schoolmanager.html'
        }, {
            name: "师资力量管理",
            id: 4,
            pid: -1,
            url: '#/teachermanager.html'
        }, {
            name: "启文荣誉管理",
            id: 5,
            pid: -1,
            url: '#/honormanager.html'
        }, {
            name: "内容管理",
            id: 6,
            pid: -1,
            url: '#/multi_image_upload.html'
        },
        {
            name: "友情管理",
            id: 9,
            pid: -1,
            url: '#/friendUrlmanager.html'
        }, {
            name: "TDK管理",
            id: 12,
            pid: -1,
            url: '#/Tdkmanager.html'
        }, {
            name: "内容管理",
            id: 10,
            pid: 6,
            url: '#/contentmanager.html'
        },{
                name: "内容分类管理",
                id: 10,
                pid: 6,
                url: '#/category.html'
            }, {
            name: "用户管理",
            id: 12,
            pid: -1,
            url: '#/usermanager.html'
        }
        ];
        formatMenus();
        //初始化类vue路由
        initRouter();
        //显示设置弹框
        $('.loginNameDiv').click(function () {
            if ($('.dialogMenu').css('display') === 'block') {
                $('.dialogMenu').css('display', 'none');
            } else {
                $('.dialogMenu').css('display', 'block');
            }

        });
        //退出登录
        $('#parentExit').click(function () {
            $('.dialogMenu').css('display', 'none');
            layer.open({
                type: 1,
                content: `<div style="padding: 20px;">是否退出</div>`,
                btn: ["确定退出", "暂不退出"],
                yes: function (index, layero) {
                    location.href = "login.html";
                },
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });
        //显示修改密码弹框
        $('#parentChangePassword').click(function () {
            $('.dialogMenu').css('display', 'none');
            layer.open({
                type: 1,
                title: '修改密码',
                content: $('#dialogChangePassword').html(), //这里content是一个普通的String
                btn: ['确定', '取消'],
                success: function (index, layero) {
                    form.render();
                    $('#dialogChangePasswordForm').submit(function (e) {
                        console.log(formArray2Data($(this).serializeArray()));
                        return false;
                    });
                },
                yes: function (index, layero) {
                    $('#dialogChangePasswordForm').submit();
                },
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });
    }



    /**
     *格式化菜单数据
     */
    function formatMenus() {
        findChildMenus(-1);
        window.element.render('nav');
    }

    /**
     * 根据id查找下级菜单
     * @param id
     */
    function findChildMenus(id) {
        var menuView = $.cookie("menuView");
        console.log("======================"+menuView)
        if (id == -1) {
            menuArray.forEach(function (item) {
                if (item.pid == id) {
                    if(menuView==="0" && item.id ===1){
                        console.log("=============")
                    }else{
                        $('.leftMenu ul')
                        .append('<li menu-id="' + item.id + '" class="layui-nav-item"><a href="' + item.url + '">' + item.name + '</a></li>')
                        findChildMenus(item.id);
                    }
                }
            });
        } else {
            menuArray.forEach(function (item) {
                if (item.pid == id) {
                    $('[menu-id="' + item.pid + '"]>a').removeAttr('href');
                    if (!$('[menu-id="' + item.pid + '"]').children('dl')[0]) {
                        $('[menu-id="' + item.pid + '"]').append('<dl class="layui-nav-child"></dl>')
                    }
                    $('[menu-id="' + item.pid + '"] dl')
                        .append('<dd menu-id="' + item.id + '"><a href="' + item.url + '">' + item.name + '</a></dd>');
                    findChildMenus(item.id);
                }
            });
        }

    }


</script>